import React, { createContext, useContext, ReactNode } from 'react';
import { useColorScheme } from 'react-native';
import { useAppContext } from './AppContext';

// 定义主题类型
export interface ThemeColors {
  // 基础颜色
  background: string;
  text: string;
  textSecondary: string;
  primary: string;
  onPrimary: string;
  secondary: string;
  onSecondary: string;
  accent: string;
  onAccent: string;
  
  // 表面颜色
  surface: string;
  onSurface: string;
  surfaceVariant: string;
  onSurfaceVariant: string;
  
  // 卡片和容器
  card: string;
  onCard: string;
  cardSecondary: string;
  
  // 边框和分割线
  border: string;
  divider: string;
  outline: string;
  
  // 状态颜色
  error: string;
  onError: string;
  warning: string;
  onWarning: string;
  success: string;
  onSuccess: string;
  info: string;
  onInfo: string;
  
  // 通知
  notification: string;
  
  // 交互状态
  hover: string;
  pressed: string;
  focus: string;
  disabled: string;
  
  // 按钮颜色
  buttonPrimary: string;
  buttonSecondary: string;
  buttonText: string;
  buttonTextSecondary: string;
  buttonTextDisabled: string;
}

// 定义浅色主题
export const LightTheme: ThemeColors = {
  // 基础颜色
  background: '#ffffff',
  text: '#1a1a1a',
  textSecondary: '#666666',
  primary: '#2196F3',
  onPrimary: '#ffffff',
  secondary: '#4CAF50',
  onSecondary: '#ffffff',
  accent: '#FF9800',
  onAccent: '#ffffff',
  
  // 表面颜色
  surface: '#f8f9fa',
  onSurface: '#1a1a1a',
  surfaceVariant: '#e3f2fd',
  onSurfaceVariant: '#424242',
  
  // 卡片和容器
  card: '#ffffff',
  onCard: '#1a1a1a',
  cardSecondary: '#f5f5f5',
  
  // 边框和分割线
  border: '#e0e0e0',
  divider: '#f0f0f0',
  outline: '#9e9e9e',
  
  // 状态颜色
  error: '#f44336',
  onError: '#ffffff',
  warning: '#ff9800',
  onWarning: '#ffffff',
  success: '#4caf50',
  onSuccess: '#ffffff',
  info: '#2196f3',
  onInfo: '#ffffff',
  
  // 通知
  notification: '#FF5252',
  
  // 交互状态
  hover: '#f5f5f5',
  pressed: '#eeeeee',
  focus: '#e3f2fd',
  disabled: '#bdbdbd',
  
  // 按钮颜色
  buttonPrimary: '#2196F3',
  buttonSecondary: '#f5f5f5',
  buttonText: '#ffffff',
  buttonTextSecondary: '#2196F3',
  buttonTextDisabled: '#9e9e9e',
};

// 定义深色主题
export const DarkTheme: ThemeColors = {
  // 基础颜色
  background: '#0d1117',
  text: '#f0f6fc',
  textSecondary: '#8b949e',
  primary: '#58a6ff',
  onPrimary: '#0d1117',
  secondary: '#56d364',
  onSecondary: '#0d1117',
  accent: '#ffa657',
  onAccent: '#0d1117',
  
  // 表面颜色
  surface: '#161b22',
  onSurface: '#f0f6fc',
  surfaceVariant: '#21262d',
  onSurfaceVariant: '#c9d1d9',
  
  // 卡片和容器
  card: '#21262d',
  onCard: '#f0f6fc',
  cardSecondary: '#30363d',
  
  // 边框和分割线
  border: '#30363d',
  divider: '#21262d',
  outline: '#6e7681',
  
  // 状态颜色
  error: '#f85149',
  onError: '#0d1117',
  warning: '#d29922',
  onWarning: '#0d1117',
  success: '#3fb950',
  onSuccess: '#0d1117',
  info: '#58a6ff',
  onInfo: '#0d1117',
  
  // 通知
  notification: '#ff7b72',
  
  // 交互状态
  hover: '#30363d',
  pressed: '#262c36',
  focus: '#1f6feb',
  disabled: '#484f58',
  
  // 按钮颜色
  buttonPrimary: '#238636',
  buttonSecondary: '#21262d',
  buttonText: '#f0f6fc',
  buttonTextSecondary: '#c9d1d9',
  buttonTextDisabled: '#484f58',
};

// 创建主题上下文
interface ThemeContextType {
  theme: ThemeColors;
  isDark: boolean;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

// 主题提供者组件
interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider: React.FC<ThemeProviderProps> = ({ children }) => {
  const { state } = useAppContext();
  const systemColorScheme = useColorScheme();
  
  // 使用AppContext中的darkMode状态来决定使用哪个主题
  const isDark = state.darkMode;
  const theme = isDark ? DarkTheme : LightTheme;
  
  return (
    <ThemeContext.Provider value={{ theme, isDark }}>
      {children}
    </ThemeContext.Provider>
  );
};

// 自定义Hook
export const useTheme = (): ThemeContextType => {
  const context = useContext(ThemeContext);
  if (context === undefined) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};